<template>
  <div class="slide" ref="slide">
    <div class="slide-group" ref="slideGroup">
      <slot>
      </slot>
    </div>
    <div v-if="showDot" class="dots">
      <span class="dot" :class="{active: currentPageIndex === index }" v-for="(item, index) in dots"></span>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    props: {
      loop: {
        type: Boolean,
        default: true
      },
      autoPlay: {
        type: Boolean,
        default: true
      },
      interval: {
        type: Number,
        default: 4000
      },
      showDot: {
        type: Boolean,
        default: true
      },
      click: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        dots: [],
        currentPageIndex: 0
      }
    },
    components: {},
    methods: {
      _initSlide() {
        this.slide = new BScroll(this.$refs.slide, {
          scrollX: true,
          momentum: false,
          snap: {
            loop: this.loop,
            threshold: 0.3,
            speed: 400
          },
          click: this.click
        })
        this.slide.on('scrollEnd', this._onScrollEnd)
        this.slide.on('touchend', () => {
          if (this.autoPlay) {
            this._play()
          }
        })
        this.slide.on('beforeScrollStart', () => {
          if (this.autoPlay) {
            clearTimeout(this.timer)
          }
        })
      },
    },
    mounted () {
      this._initSlide()
    }
  }
</script>

<style>
  .slide {
    overflow: hidden;
    position: relative;
  }

  .slide:after {
    content: '';
    display: block;
    clear: both;

  }

  .slide .slide-group {
    float: left;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
  }

  .slide-group .slide-item {
    position: relative;
    width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;

  }

  .slide-group > div {
    display: block;
    width: 100%;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid black;
  }

  .slide-group img {
    display: block;
    width: 100%;

  }

</style>
